<template>
  <div class="about-container">
    <el-card class="about-card">
      <template #header>
        <div class="about-header">
          <h1>关于我们</h1>
        </div>
      </template>

      <div class="about-content">
        <section class="about-section">
          <h2>平台介绍</h2>
          <p>
            宠物领养平台是一个致力于为流浪动物提供温暖家园的公益性平台。我们连接爱心人士与待领养宠物，通过规范的领养流程，确保每一个生命都能得到应有的尊重与关爱。
          </p>
          <p>
            平台成立于2023年，目前已成功帮助上千只流浪动物找到了新家，得到了社会各界的广泛认可与支持。
          </p>
        </section>

        <section class="about-section">
          <h2>我们的使命</h2>
          <p>
            通过科学的方式减少流浪动物数量，提高公众对动物保护的意识，促进人与动物和谐共处。
          </p>
          <div class="mission-cards">
            <div class="mission-card">
              <i class="mission-icon el-icon-house"></i>
              <h3>为流浪动物提供家园</h3>
              <p>帮助流浪动物找到爱它们的家庭，结束流浪生活。</p>
            </div>
            <div class="mission-card">
              <i class="mission-icon el-icon-connection"></i>
              <h3>搭建爱心桥梁</h3>
              <p>连接爱心人士与待领养宠物，促进有效沟通。</p>
            </div>
            <div class="mission-card">
              <i class="mission-icon el-icon-bell"></i>
              <h3>宣传动物保护</h3>
              <p>提高社会对动物保护的认识，倡导文明养宠理念。</p>
            </div>
          </div>
        </section>

        <section class="about-section">
          <h2>领养须知</h2>
          <ol class="adoption-rules">
            <li>领养人必须年满18周岁，有稳定的工作和收入，有固定的住所。</li>
            <li>领养前请慎重考虑是否有足够的时间、精力和财力照顾宠物。</li>
            <li>领养后，领养人需要定期向平台反馈宠物的生活情况。</li>
            <li>如不能继续饲养，请联系平台安排重新领养，切勿随意丢弃。</li>
            <li>领养过程中不收取任何费用，但需要支付宠物必要的医疗费用。</li>
          </ol>
        </section>

        <section class="about-section">
          <h2>联系我们</h2>
          <div class="contact-info">
            <p>
              <strong>电话：</strong>
              400-123-4567
            </p>
            <p>
              <strong>邮箱：</strong>
              contact@pet-adoption.com
            </p>
            <p>
              <strong>地址：</strong>
              北京市朝阳区xxx街道xxx号
            </p>
            <p>
              <strong>工作时间：</strong>
              周一至周五 9:00-18:00，周六、周日 10:00-16:00
            </p>
          </div>

<!--          <div class="contact-form">-->
<!--            <h3>留言板</h3>-->
<!--            <el-form-->
<!--              :model="messageForm"-->
<!--              :rules="messageRules"-->
<!--              ref="messageFormRef"-->
<!--              label-width="80px"-->
<!--            >-->
<!--              <el-form-item label="姓名" prop="name">-->
<!--                <el-input-->
<!--                  v-model="messageForm.name"-->
<!--                  placeholder="请输入您的姓名"-->
<!--                ></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="邮箱" prop="email">-->
<!--                <el-input-->
<!--                  v-model="messageForm.email"-->
<!--                  placeholder="请输入您的邮箱"-->
<!--                ></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="留言内容" prop="content">-->
<!--                <el-input-->
<!--                  type="textarea"-->
<!--                  v-model="messageForm.content"-->
<!--                  :rows="4"-->
<!--                  placeholder="请输入留言内容"-->
<!--                ></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item>-->
<!--                <el-button type="primary" @click="submitMessage"-->
<!--                  >提交留言</el-button-->
<!--                >-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--          </div>-->
        </section>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const messageFormRef = ref(null);
const messageForm = reactive({
  name: "",
  email: "",
  content: "",
});

const messageRules = {
  name: [{ required: true, message: "请输入您的姓名", trigger: "blur" }],
  email: [
    { required: true, message: "请输入您的邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
  ],
  content: [{ required: true, message: "请输入留言内容", trigger: "blur" }],
};

const submitMessage = () => {
  messageFormRef.value.validate((valid) => {
    if (valid) {
      // 这里可以添加发送留言的API调用
      alert("留言提交成功！我们会尽快回复您。");

      // 重置表单
      messageForm.name = "";
      messageForm.email = "";
      messageForm.content = "";
      messageFormRef.value.resetFields();
    }
  });
};
</script>

<style scoped>
.about-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-card {
  margin-bottom: 20px;
}

.about-header {
  text-align: center;
}

.about-header h1 {
  color: #303133;
  font-size: 28px;
  margin: 0;
}

.about-content {
  padding: 10px 0;
}

.about-section {
  margin-bottom: 40px;
}

.about-section h2 {
  color: #303133;
  font-size: 22px;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 10px;
}

.about-section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: #409eff;
}

.about-section p {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 15px;
}

.mission-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.mission-card {
  flex: 1;
  min-width: 250px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f7fa;
  text-align: center;
}

.mission-icon {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 15px;
}

.mission-card h3 {
  color: #303133;
  font-size: 18px;
  margin-bottom: 10px;
}

.mission-card p {
  color: #606266;
  margin: 0;
}

.adoption-rules {
  padding-left: 20px;
}

.adoption-rules li {
  margin-bottom: 10px;
  color: #606266;
  line-height: 1.6;
}

.contact-info {
  margin-bottom: 30px;
}

.contact-info p {
  margin: 10px 0;
  color: #606266;
}

.contact-form h3 {
  color: #303133;
  font-size: 18px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .mission-cards {
    flex-direction: column;
  }

  .mission-card {
    min-width: auto;
  }
}
</style>
